<template>
  <div class="item-table">
    <div class="item-table-title">最新测量数据</div>
    <div class="no-data" :style="{opacity}">暂无数据</div>
    <dv-scroll-board :config="config" class="table" @click="goMyPatient"/>
    <el-dialog title="患者" :visible.sync="patientView" width="80vw" append-to-body>
      <patient ref="patient" :watchFlag="false"/>
    </el-dialog>
  </div>
</template>

<script>
  import Patient from "@/views/components/patient";
export default {
  components: {
    Patient
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    tableData: {
      handler(val) {
        this.opacity=0.6
        let config =this.config
        config.data=val.map((item,index)=>{
          return [item.name,item.age,item.sex == 1?'男':'女',item.diseaseCategory||'-',
               item.testDate,`<span style="color:${item.isSbpAbnormal?this.colors[item.sbpAbnormalLevel-1] : ''}">${item.sbp}</span>`,
          `<span style="color:${item.isDbpAbnormal?this.colors[item.dbpAbnormalLevel-1] : ''}">${item.dbp}</span>`,item.hr
             ]
         })
         if(config.data.length){
           this.opacity=0
         }
        this.config = JSON.parse(JSON.stringify(config))
      },
      deep: true
    }
  },
  data() {
    return {
      colors:['#409EFF','rgb(253,154,1)','red'],//警告颜色
      opacity: 0.6,
      config: {
        header: ["姓名", "年龄", "性别",'患者病类','测量时间','收缩压(mmHg)','舒张压(mmHg)','脉搏(次/分)'],
        data: [],
        rowNum:9, //表格行数
        headerHeight: 35,
        headerBGC: "#0f1325", //表头
        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行
        index: true,
        columnWidth: [40,100,80,80,150,200,150,150,130],
        align: ["center"]
      },
      patientView:false,//患者弹出
    };
  },
  created() {

  },
  methods: {
    //前往我的患者
    goMyPatient(e){
      this.patientView=true
      this.$nextTick(()=>{
        this.$refs.patient.init(this.tableData[e.rowIndex].patientId,this.tableData[e.rowIndex].name)
      })
    }
  }
};
</script>

<style lang="scss" scoped>

.item-table {
  background-image: url("~@/assets/screen/img5.png");
  background-size: cover;
  background-position: center center;
  width:48vw;
  height:18.72vw;
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: -1.46vw;
  padding: 0.2vw;
  ::v-deep .row-item{
    cursor: pointer;
  }
  &-title{
    line-height: 2.75vw;
    font-size: 1.2vw;
    padding-left: 1vw;
    color: #fff;;
    position: absolute;
    text-align: center;
    left: 0vw;
    top: 0;
  }
  .no-data{
    color:#fff;
    font-size: 1.2vw;
    position: absolute;
    width: 100%;
    text-align: center;
     line-height: 20.72vw;
     left: 0;
     top: 0;
  }
  .table{
    width:46.5vw;
    height:15vw;
    margin-top: 2.55vw;

  }
}
</style>
